<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :rules="rules">
      <FormItem :top_form="top_form" :queryParams="queryParams" @handleQuery="handleQuery" @resetQuery="resetQuery" />
      <!-- <el-form-item v-for="(item,index) in top_form" :key="index" :label="item.title" :prop="item.prop">
        <el-input v-if="item.type==='input'" v-model="queryParams[item.prop]" :placeholder="item.placeholder" clearable size="mini" :style="{width:item.width}" @keyup.enter.native="handleQuery" />
        <el-select v-if="item.type==='select'" v-model="queryParams[item.prop]" :placeholder="item.placeholder" clearable size="mini" :style="{width:item.width}">
          <el-option v-for="dict in dict.type[item.dict]" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item> -->
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-refresh" size="mini" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">刷新缓存</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <MyTable :tableTitle="PLRTitle" :tableData="PRList" :page="pages" @getPageTable="getTable" @getSize="getTable" :mutiSelect="true">
      <div slot="handleColumn">
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click.native.prevent="operateDetail(scope.$index, PRList)">
              {{scope.row.AuditStatus >= 1?"查看":"约稿"}}
            </el-button>
          </template>
        </el-table-column>
      </div>
    </MyTable>

    <!-- <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
      <el-table-column type="index" width="55" align="center" />
      <el-table-column type="selection" width="100" align="center" />

      <el-table-column label="字典编号" align="center" prop="dictId" />
      <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
            <span>{{ scope.row.dictType }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->

    <!-- 添加或修改参数配置对话框 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="form.dictName" placeholder="请输入字典名称" />
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="form.dictType" placeholder="请输入字典类型" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { listType, getType, delType, addType, updateType, exportType, refreshCache } from "@/api/system/dict/type";
// import FormItem from '../com/index'
// import MyTable from './index.vue'
export default {
  name: "Dict",
  dicts: ['sys_yes_no'],
  components: { FormItem, MyTable },
  data() {
    return {
      labelPosition: 'left',
      roleType: 'hyb1',
      contractVisible: false, //弹窗显示隐藏
      PLRTitle: [],//表头数据
      PRList: [{}],//表格数据
      pages: {//分页数据
        curPage: 1, // 分页-当前页
        limit: 10,
        total: 0,
      },


      top_form: [
        { title: '地址', prop: 'dictName', type: 'input', placeholder: '请输入地址', width: '150px' },
        { title: '是否已租', prop: 'sfyz', type: 'select', placeholder: '请选择是否已租', width: '150px', dict: 'sys_yes_no' },
        { title: '状态', prop: 'zt', type: 'select', placeholder: '请选择状态', width: '150px' },
        { title: '租金范围', prop: 'zjfw', type: 'select', placeholder: '请选择组件范围', width: '150px' },
        { title: '级别', prop: 'jb', type: 'select', placeholder: '请选择级别', width: '150px' },
        { title: '类型', prop: 'lx', type: 'select', placeholder: '请选择类型', width: '150px', dict: [] },
        { title: '层数', prop: 'cs', type: 'select', placeholder: '请选择层数', width: '150px', dict: [] },
        { title: '面积', prop: 'mj', type: 'select', placeholder: '请选择面积', width: '150px', dict: [] },
        { title: '朝向', prop: 'cx', type: 'select', placeholder: '请选择朝向', width: '150px', dict: [] },
        { title: '独立上下水', prop: 'dlsxs', type: 'select', placeholder: '请选择独立上下水', width: '150px', dict: 'sys_yes_no' },
        { title: '独卫', prop: 'dc', type: 'select', placeholder: '请选择独卫', width: '150px', dict: 'sys_yes_no' },
        { title: '独厨', prop: 'dw', type: 'select', placeholder: '请选择独厨', width: '150px ', dict: 'sys_yes_no' },
      ],
      top_form1: [
        { title: '姓名', props: 'dz', type: 'input', placeholder: '请输入地址', width: '150px' },
        { title: '身份证号', props: 'sfyz', type: 'select', placeholder: '请选择是否已租', width: '150px', dict: 'sys_yes_no' },
        { title: '性别', props: 'zt', type: 'select', placeholder: '请选择状态', width: '150px' },
        { title: '联系方式', props: 'zjfw', type: 'select', placeholder: '请选择组件范围', width: '150px' },
        { title: '籍贯(省市)', props: 'jb', type: 'select', placeholder: '请选择级别', width: '150px' },
        { title: '籍贯(区县)', props: 'lx', type: 'select', placeholder: '请选择类型', width: '150px', dict: [] },
        { title: '租户', props: 'cs', type: 'select', placeholder: '请选择层数', width: '150px', dict: [] },
        { title: '房屋', props: 'mj', type: 'select', placeholder: '请选择面积', width: '150px', dict: [] },
      ],
      top_form2: [
        { title: '合同编号', props: 'dz', type: 'input', placeholder: '请输入地址', width: '150px' },
        { title: '合同签署日期', props: 'sfyz', type: 'select', placeholder: '请选择是否已租', width: '150px', dict: 'sys_yes_no' },
        { title: '租户', props: 'zt', type: 'select', placeholder: '请选择状态', width: '150px' },
        { title: '身份证', props: 'zjfw', type: 'select', placeholder: '请选择组件范围', width: '150px' },
        { title: '房屋', props: 'jb', type: 'select', placeholder: '请选择级别', width: '150px' },
        { title: '状态', props: 'lx', type: 'select', placeholder: '请选择类型', width: '150px', dict: [] },
      ],
      column: [
        { title: '是否已租', prop: 'index', width: '150px' },
        { title: '状态', prop: 'index', width: '150px' },
        { title: '地址', prop: 'index', width: '150px' },
        { title: '租金', prop: 'index', width: '150px' },
        { title: '等级', prop: 'index', width: '150px' },
        { title: '类型', prop: 'index', width: '150px' },
        { title: '层数', prop: 'index', width: '150px' },
        { title: '面积', prop: 'index', width: '150px' },
        { title: '朝向', prop: 'index', width: '150px' },
        { title: '上下水', prop: 'index', width: '150px' },
        { title: '独卫', prop: 'index', width: '150px' },
        { title: '独厨', prop: 'index', width: '150px' },
        { title: '操作', prop: 'cz', width: '200px' },
      ],
      column1: [
        { title: '身份证号', prop: 'index', width: '150px' },
        { title: '姓名', prop: 'index', width: '150px' },
        { title: '性别', prop: 'index', width: '150px' },
        { title: '联系方式', prop: 'index', width: '150px' },
        { title: '籍贯(省市)', prop: 'index', width: '150px' },
        { title: '籍贯(区县)', prop: 'index', width: '150px' },
        { title: '状态', prop: 'index', width: '150px' },
        { title: '现租', prop: 'index', width: '150px' },
        { title: '操作', prop: 'cz', width: '200px' },
      ],
      column2: [
        { title: '合同编号', prop: 'index', width: '150px' },
        { title: '合同名称', prop: 'index', width: '150px' },
        { title: '合同签署日期', prop: 'index', width: '150px' },
        { title: '合同金额', prop: 'index', width: '150px' },
        { title: '租户', prop: 'index', width: '150px' },
        { title: '身份证', prop: 'index', width: '150px' },
        { title: '房屋', prop: 'index', width: '150px' },
        { title: '合同开始日期', prop: 'index', width: '150px' },
        { title: '合同结束日期', prop: 'cz', width: '200px' },
        { title: '实际结束日期', prop: 'cz', width: '200px' },
        { title: '状态', prop: 'index', width: '150px' },
        { title: '操作', prop: 'index', width: '150px' },
      ],
      column3: [
        { title: '合同编号', prop: 'index', width: '150px' },
        { title: '合同名称', prop: 'index', width: '150px' },
        { title: '合同签署日期', prop: 'index', width: '150px' },
        { title: '合同金额', prop: 'index', width: '150px' },
        { title: '租户', prop: 'index', width: '150px' },
        { title: '身份证', prop: 'index', width: '150px' },
        { title: '房屋', prop: 'index', width: '150px' },
        { title: '合同开始日期', prop: 'index', width: '150px' },
        { title: '合同结束日期', prop: 'cz', width: '200px' },
        { title: '距离到期还剩', prop: 'cz', width: '200px' },
      ],
      column4: [
        { title: '申请编号', prop: 'index', width: '150px' },
        { title: '申请时间', prop: 'index', width: '150px' },
        { title: '申请人', prop: 'index', width: '150px' },
        { title: '身份证', prop: 'index', width: '150px' },
        { title: '联系方式', prop: 'index', width: '150px' },
        { title: '房屋', prop: 'index', width: '150px' },
        { title: '共同居住人数', prop: 'index', width: '150px' },
        { title: '计划开始日期', prop: 'index', width: '150px' },
        { title: '计划结束日期', prop: 'cz', width: '200px' },
        { title: '状态', prop: 'cz', width: '200px' },
        { title: '处理时间', prop: 'cz', width: '200px' },
        { title: '操作', prop: 'cz', width: '200px' },
      ],
      column4: [
        { title: '报修编号', prop: 'index', width: '150px' },
        { title: '房屋', prop: 'index', width: '150px' },
        { title: '报修内容', prop: 'index', width: '150px' },
        { title: '报修时间', prop: 'index', width: '150px' },
        { title: '报修人', prop: 'index', width: '150px' },
        { title: '联系方式', prop: 'index', width: '150px' },
        { title: '图片', prop: 'index', width: '150px' },
        { title: '状态', prop: 'index', width: '150px' },
        { title: '操作', prop: 'cz', width: '200px' },
      ],
      column4: [
        { title: '维修记录', prop: 'index', width: '150px' },
        { title: '房屋', prop: 'index', width: '150px' },
        { title: '维修内容', prop: 'index', width: '150px' },
        { title: '维修时间', prop: 'index', width: '150px' },
        { title: '维修人', prop: 'index', width: '150px' },
        { title: '维修人联系方式', prop: 'index', width: '150px' },
        { title: '状态', prop: 'index', width: '150px' },
        { title: '回访确认完成时间', prop: 'index', width: '150px' },
        { title: '满意度', prop: 'index', width: '150px' },
        { title: '操作', prop: 'cz', width: '200px' },
      ],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        dictName: [
          { required: true, message: "字典名称不能为空", trigger: "blur" }
        ],
        dictType: [
          { required: true, message: "字典类型不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.init()
    this.getList();
    this.getTable()
  },
  methods: {
    init() {
      let that = this
      this.PLRTitle = [{
        label: '序号', prop: 'xh', render: (h, params) => {
          return h('span', params.index + that.pages.limit * (that.pages.curPage - 1) + 1)
        }
      },
      { label: '合同编号', prop: 'ContractNum' },
      {label: '出版社', prop: 'EntityName'},
      { label: '书册名称', prop: 'BookName' },
      {
        label: '出版日期', prop: 'PublishTime', render: (h, params) => {
          console.log(this.dict.type, 'dict-tag')
          return h('dict-tag', {
            props: {
              options: this.dict.type.sys_yes_no,
              value: 'Y'
            },
          })
        }
      },
      {
        label: '类型', prop: "BookType", formatter: (row, column) => {
          return row.BookType == 0 ? '汇编' : '非汇编'
        }
      },
      {
        label: '作品数量', prop: 'ArticleNum', render: (h, params) => {
          return h('a', {
            attrs: { href: 'https://www.baidu.com/' }
          }, '点击')
        }
      },
      {
        label: '订单状态', prop: 'StatusDesc', render: (h, params) => {
          // return (<div>
          //   <el-image style="width: 100px; height: 100px" src="4 ../../assets/images/103__user.png" preview-src-list="srcList">
          //   </el-image>
          // </div>)
          // return h('el-tag', {
          //   props: { type: params.row.StatusDesc == 0 ? 'success' : params.row.StatusDesc == 1 ? 'info' : 'danger' } // 组件的props
          // }, params.row.StatusDesc == 0 ? '未约稿' : params.row.state === 1 ? '已约稿' : '约稿中')
          return h('el-image', {
            attrs: { src: require('../../../../assets/images/103__user.png'), style: 'width:100px' }, // 组件的props
            props: {
              'preview-src-list': ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg']
            },
            on: {
              'click': function (event) {
                console.log(that)
                that.PRList = [{ ContractNum: '56789' }]
              }
            }
          })
        }
      },]
    },
    getTable(curpage, limit) {//获取/刷新表格
      this.PRList = [{ ContractNum: '123' }]
      //     // 总条数赋值
      this.pages.total = this.PRList.length
      // let type = this.$store.getters['status/getCheckStatu']
      // this.contractVisible = false
      // orderAPI({ PageNum: curpage, Status: type, Limit: limit, RoleType: this.roleType }).then(res => {
      //   if (res.code == 0) {
      //     this.PRList = res.data.List
      //     // 总条数赋值
      //     this.pages.total = res.data.Page.Total
      //   }
      // })
    },

    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.typeList = response.rows;
        this.total = response.total;
        this.loading = false;
      }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: "0",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // /** 新增按钮操作 */
    // handleAdd() {
    //   this.reset();
    //   this.open = true;
    //   this.title = "添加字典类型";
    // },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // /** 修改按钮操作 */
    // handleUpdate(row) {
    //   this.reset();
    //   const dictId = row.dictId || this.ids
    //   getType(dictId).then(response => {
    //     this.form = response.data;
    //     this.open = true;
    //     this.title = "修改字典类型";
    //   });
    // },
    /** 提交按钮 */
    // submitForm: function () {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       if (this.form.dictId != undefined) {
    //         updateType(this.form).then(response => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addType(this.form).then(response => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    // },
    /** 删除按钮操作 */
    // handleDelete(row) {
    //   const dictIds = row.dictId || this.ids;
    //   this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function () {
    //     return delType(dictIds);
    //   }).then(() => {
    //     this.getList();
    //     this.$modal.msgSuccess("删除成功");
    //   }).catch(() => { });
    // },
    /** 导出按钮操作 */
    // handleExport() {
    //   const queryParams = this.queryParams;
    //   this.$modal.confirm('是否确认导出所有类型数据项？').then(() => {
    //     this.exportLoading = true;
    //     return exportType(queryParams);
    //   }).then(response => {
    //     this.$download.name(response.msg);
    //     this.exportLoading = false;
    //   }).catch(() => { });
    // },
    /** 刷新缓存按钮操作 */
    // handleRefreshCache() {
    //   refreshCache().then(() => {
    //     this.$modal.msgSuccess("刷新成功");
    //   });
    // }
  }
};
</script>